import React, { Component } from 'react';
import {observer} from "mobx-react";
import  Mobx from  '../mobx'
import FansOrFocus from  './FansOrFocus'
import axios from  'axios'
import Dibu from  './dibu'
@observer class Fans extends Component {
    constructor(props) {
        super(props)
        this.state={
            size:'',
            total:'',
            Array:[],
        }
        this.intervaling=''
    }
    componentDidMount(){
        Mobx.history= this.props.history
        axios.get('http://www.niuduxiu.com/attention/findByOtheryF.jhtml?id='+Mobx.zhanghao+'&pageNumber=1&pageSize=20')
            .then((item)=>{
                this.setState({
                    size:item.data.pageNumber,
                    total:item.data.totalPage,
                    Array:item.data.mlist
                },()=>{
                    this.interval()
                })
            })
    }
    interval(){
        if(this.state.total<=this.state.size){
            return false;
        }else{
            this.intervaling=setInterval(()=>{
                if((document.documentElement.scrollTop||document.body.scrollTop)-document.body.scrollHeight>=-1000){
                    clearInterval(this.intervaling)
                    this.setState({
                        size:this.state.size+1
                    },()=>{
                        this.loading()
                    })
                }
            })
        }
    }
    loading(){
        axios.get('http://www.niuduxiu.com/attention/findByOtheryF.jhtml?id='+Mobx.zhanghao+'&pageNumber='+this.state.size+'&pageSize=20')
            .then((item)=>{
                this.setState({
                    size:item.data.pageNumber,
                    total:item.data.totalPage,
                    Array:this.state.Array.concat(item.data.mlist)
                },()=>{
                    this.interval()
                })
            })
    }
    render() {
        return (
            <div>
                <div>
                    <p style={{textAlign:'center',lineHeight:'12vw',fontSize:'4.5vw'}}>粉丝</p>
                    <FansOrFocus Array={this.state.Array} fans='fans' />
                    <Dibu  size={this.state.size} total={this.state.total} />
                </div>
            </div>
        );
    }
}

export default Fans;
